import React from 'react';
import { connect } from 'dva';
import { List, Button, Grid, Badge, Icon } from 'antd-mobile';
import { routerRedux } from 'dva/router';
import Container from '../components/Base/Container';
import styles from './PrecisionPage.css';
import MyIcon from '../components/Base/MyIcon';
import _ from 'lodash';

class CustomizeTask extends React.Component {

  render() {
    const { dispatch, taskList, task: taskModel } = this.props;
    const data = [];
    let allCount = 0;
    _.forEach(taskList, (task) => {
      let vipCount = 0;
      const taskData = taskModel['vips101' + task.taskId];
      if (taskData && taskData.meta) {
        vipCount = taskData.meta.totalCount;
      }
      allCount += vipCount;
      data.push({
        text: <div><Badge className={styles.ymTitle} text={vipCount} style={{ marginLeft: 10 }}>{task.name}</Badge></div>,
        title: task.name,
        subType: task.taskId,
        num: vipCount,
        href: '/p1',
      });
    });
    return (
      <Container title={this.props.location.query.title}>
        <div className={styles["notice"]}>
          <MyIcon className={styles["dpib"]}
            type="trips" color="#fa3024" size="xs"
          />
          <span className={styles["notice-text-black"]}>总计：</span>
          <span className={styles["notice-text"]}>{allCount} 人</span>
        </div>

        <div className={styles["ym-container"]}>
          {data.map((item, index) => {
            return (
              <div
                key={'yym' + index}
                className={styles["ym-box"]}
                onClick={() => {
                  dispatch(routerRedux.push({
                    pathname: item.href,
                    query: {
                      taskType: 101,
                      subType: item.subType,
                      title: item.title,
                    },
                  }));
                }}>
                {item.text}
                <div className={styles["icon-right"]}>
                  <Icon type="right" size={"md"} />
                </div>
              </div>
            );
          })}
        </div>
      </Container>
    );
  }
}

export default connect((state, props) => {
  return { taskList: state.customizeTask.taskList, task: state.task };
})(CustomizeTask);
